<script setup >
import getRequest from "../utils/lxw_request";
import close_svg from "../assets/images/student/close.svg"
import file_add_svg from "../assets/images/student/file-add.svg"
import RichTextEditor from './RichTextEditor.vue';
import { ref, onMounted, inject } from "vue";
const props = defineProps(['isOpenModal', 'log'])
const emit = defineEmits(['update:isOpenModal'])

function closeModal() {
    emit('update:isOpenModal', false)
}

const log_text = ref(props.log.text);
const deleteFileList = ref([]);
const add_appendix_file_ref = ref(null);
const add_img_top = ref(160)

const add_file_input_ref = ref(null)
const addFileList = ref([])
function openFileExplorer(e) {
    e.stopPropagation();
    add_file_input_ref.value.click();

}

function addFiles() {
    const list = []
    for (let i = 0; i < add_file_input_ref.value.files.length; i++) {
        list.push(add_file_input_ref.value.files[i])
    }
    addFileList.value = list.map(x => x)
}

function deleteFile(index) {
    addFileList.value = addFileList.value.filter((e, i) => i != index)
}

function deleteOriginalFile(file_id) {
    const find_index = deleteFileList.value.findIndex((e) => e === file_id);
    if(find_index != -1) {
        deleteFileList.value.splice(find_index, 1);
    } else {
        deleteFileList.value.push(file_id);
    }
}

onMounted(() => {
    add_appendix_file_ref.value !== null ? add_appendix_file_ref.value.addEventListener('scroll', (e) => {
        // 160是添加附件图片到顶部的距离
        add_img_top.value = e.target.scrollTop + 160
    }) : {};
})

const getLogs = inject("getLogs")
function modifyLog() {
    const formData = new FormData();
    if(log_text.value !== props.log.text) {
        formData.append("text", log_text.value);
    }
    
    for(const del_id of deleteFileList.value) {
        formData.append("del", del_id);
    }

    for(const file of add_file_input_ref.value.files) {
        formData.append("files", file);
    }

    getRequest(`/stu/course/logs/${props.log.logId}`, "PUT", new Headers(), formData)
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                alert("修改日志成功")
                getLogs();
                closeModal();
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}

</script>
<template>
    <div class="log-modification-modal" :class="{ open: props.isOpenModal }">
        <div class="content">
            <div class="header">
                <img :src="close_svg" alt="Delete" @click="closeModal" />
            </div>
            <div class="main">
                <div class="title">修改日志</div>
                <div class="subtitle">日志文本</div>
                <RichTextEditor class="rich-text-editor" v-model:text="log_text" />
                <div class="subtitle">日志附件(请选择要删除的文件)</div>
                <div class="appendix-file">
                    <ul>
                        <li v-for="(file, index) in props.log['files']" :key="index" class="delete-file-item" >
                            <span :class="{'delete-file-text': deleteFileList.includes(file['fileId'])}" >{{ file['fileName'] }}</span>
                            <!-- <img v-if="deleteFileList.includes(file['fileId'])" :src="close_svg" alt="Delete" @click="() => deleteOriginalFile(file['fileId'])" class="delete-file-image" /> -->
                            <span @click="() => deleteOriginalFile(file['fileId'])" class="delete-file-checkbox" :class="{checked: deleteFileList.includes(file['fileId']) }" ></span>
                        </li>

                    </ul>
                </div>
                <div class="subtitle">添加附件</div>
                <div class="add-appendix-file" ref="add_appendix_file_ref">

                    <ul>
                        <li v-for="(file, index) in addFileList" :key="index"><span>{{ file.name }}</span><img :src="close_svg"
                                alt="Delete" @click="deleteFile(index)" class="delete-file-image" /></li>

                    </ul>
                    <img :src="file_add_svg" alt="File add" width="32" height="32" :style="{ top: add_img_top + 'px' }"
                        @click="openFileExplorer"  class="add-file-image" />
                    <input type="file" ref="add_file_input_ref" style="display: none;" multiple @change="addFiles" />
                </div>
            </div>
            <div class="footer">
                <div class="button confirm" @click="modifyLog" >修改</div>
                <div class="button cancel" @click="closeModal" >取消</div>
            </div>
        </div>
    </div>
</template>
<style scoped >
.log-modification-modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 20;
}

.log-modification-modal.open {
    display: flex;
    justify-content: center;
    align-items: start;
}

.content {
    width: 800px;
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 20px 50px;
    margin-top: 65px;
}

.header {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 30px;
}


.header>img {
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s;
}

.header>img:hover {
    transform: rotate(90deg);
}

.main {
    margin-bottom: 20px;
}


.title {
    text-align: center;
    padding: 10px 5px;
    margin: 20px auto;
    font-size: 20px;
    /* border-bottom: 1px solid #909399; */
}

.rich-text-editor {
    border: 1px solid #ccc;
    margin-bottom: 20px;
}


.add-appendix-file,
.appendix-file {
    height: 200px;
    border: 1px solid #707070;
    padding: 12px;
    overflow: auto;
    margin-bottom: 25px;
}


.appendix-file>ul>li,
.add-appendix-file>ul>li {
    list-style: none;
    height: 32px;
    position: relative;
}

.appendix-file>ul>li::before,
.add-appendix-file>ul>li::before {
    content: url("../assets/images/student/file.svg");
    vertical-align: middle;
}

.delete-file-text {
    text-decoration: line-through;
    color: #F56C6C;
}

.delete-file-image {
    vertical-align: middle;
    margin-right: 50px;
    display: inline-block;
    transform: scale(0.6);
    cursor: pointer;
}

.delete-file-checkbox {
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    background-color: #909399;
    margin-right: 50px;
}

.delete-file-checkbox.checked {
    background-color: #F56C6C;
}

.delete-file-checkbox:hover {
    background-color:  #dedfe0;
}


.add-appendix-file {
    position: relative;

}


.delete-file-image,
.add-file-image {

    position: absolute;
    right: 5px;
    cursor: pointer;
}

.file-link {
    display: inline-block;
    text-decoration: underline;
    color: #0000EE;
    cursor: pointer;
    opacity: 0.7;
}

.file-link:hover {
    opacity: 1;
}

.file-link:visited {
    color: #872bff;
}


.footer {
    display: flex;
    justify-content: end;
    align-items: center;
}

.button {
    width: 100px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;

    color: #ffffff;
    opacity: 1;
    text-align: center;
    border-radius: 10px;
    user-select: none;
    letter-spacing: 1px;
    margin: 0 10px;
}

.button:hover {
    opacity: 0.8;
}

.button:active {
    transform: translateY(3px);
}

.button.confirm {
    background-color: #409EFF;
}

.button.cancel {
    background-color: #909399;
}
</style>